<template>
	<!-- 搭配 cl-upload 组件使用，预览视频文件 -->
	<view class="container" :style="$utils.disposeSafeBottomFun()">
		<!-- <view> -->
		<video id="myVideo" class="video" :src="videoPath" :autoplay="true" :loop="false" object-fit="contain"
			:enable-play-gesture="true" :controls="true" :show-center-play-btn="true" :show-fullscreen-btn="true"
			:show-play-btn="true" :show-loading="true" :vslide-gesture="true" :enable-progress-gesture="true">
			<cover-view class="close" @tap="goBack">
				<cover-image @tap="goBack" class="image" src="@/static/image/Icon/close.png"
					mode="widthFix"></cover-image>
			</cover-view>
		</video>
		<!-- </view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoPath: '',
				customBar: 0,
				statusBar: 0
			}
		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success: e => {
					that.customBar = e.statusBarHeight + (e.platform == 'android' ? 50 : 45);
					that.statusBar = e.statusBarHeight;
				}
			});
		},
		onLoad: function(options) {
			let url = options.url;
			if (!url) {
				uni.showToast({
					icon: "none",
					title: '无视频源',
				})
				uni.navigateBack();
			} else {
				this.videoPath = encodeURI(url)
			}
		},
		mounted() {
			this.$store.state.systemConfig.msgConfig.activeCtx.hide();
		},
		onUnload() {
			this.$store.state.systemConfig.msgConfig.activeCtx.show();
		},
		methods: {
			goBack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 750rpx;
		height: 100vh;
		background-color: black;
	}

	.video {
		position: relative;
		width: 750rpx;
		height: 100%;
	}

	.close {
		position: absolute;
		top: 50px;
		left: 20px;
		background-color: rgba(55, 55, 55, 0.8);
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		// border-bottom-left-radius: 200rpx;
		border-radius: 9999px;
		overflow: hidden;
		z-index: 9999;

		.image {
			width: 18px;
			height: 18px;
		}
	}


	.play {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 30%;
		z-index: 95;
	}
</style>